functional component vs class component แตกต่างกันอย่างไร

functional component class component difference

#Classmethod Thailand

#Thai Language

#React

Satang Temnithikul

2021.07.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Blog นี้ผมจะมาเขียนอธิบายเกี่ยวกับความแตกต่างระหว่าง Functional Components กับ Class Components ใน react ที่ได้ศึกษามากันครับ

Component คืออะไร

Component คือ HTML Element หนึ่งอัน หรือ กลุ่มของ HTML Element อย่างน้อย 1 อันขึ้นไปมารวมกัน ( HTML Element คือ <span>, <div>, <button>, และอื่นๆเป็นต้น )

โดยในแต่ละ HTML Element มีการกำหนดคุณสมบัติต่างๆให้กับ Element เพื่อให้สามารถตกแต่ง Element ให้สวยขึ้นเช่น

<p style="color:red;">A red paragraph.</p> // จะทำให้ตัวหนังสือเป็นสีแดง

หรือตั้งค่าพฤติกรรมต่างๆของ Element เช่น

<button disabled>button</button>  // จะทำให้ไม่สามารถกดปุ่มได้

Functional component คืออะไร

Functional component คือ component หนึ่งอัน หรือ เป็นกลุ่มของ component หลายๆอันมารวมกัน ใน react จะมีการเขียน functional component เป็น javascript มีรูปแบบการเขียนเหมือนให้ component นั้นๆเป็น function อันนึงของโปรแกรม โดยการเขียนแบบ function จะใช้ได้กับ React version 16.8.xx ขึ้นไปซึ่งมาพร้อมกับ React hook

Syntax :

function helloWorld(props) {
  return <h1>hello world</h1>;
}

Example :

HTML :

<div id="main"></div>

JS :

function HelloFunction (props) {
    return <h1>Hello {props.name}</h1>
}
ReactDOM.render(
  <HelloFunction name="world" />,
  document.getElementById('main')
);

Output :

จากตัวอย่าง function HelloFunction จะทำการ return component ที่รับ props ที่มี key = name และ value ＝ world และจะถูกนำไป render ใน <div> ที่มี id=“main”

Class Component คืออะไร

Class Component คือ component หนึ่งอัน หรือ เป็นกลุ่มของ component หลายๆอันมารวมกัน ใน react จะมีการเขียน class component เป็น javascript มีรูปแบบการเขียนเหมือนให้ component นั้นๆเป็น class อันนึงของโปรแกรม ซึ่งเป็นการเขียนในรูปแบบเก่า

Syntax :

class helloWorld extends React.Component {
  render() {
    return <h1>hello world</h1>;
  }
}

Example :

HTML :

<div id="main"></div>

JS :

class HelloClass extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>
  }
}
ReactDOM.render(
  <HelloClass name="world" />,
  document.getElementById('main')
);

Output :

จากตัวอย่าง class HelloClass จะทำการ render component ที่รับ props ที่มี key ＝ name และ value ＝ world และจะถูกนำไป render ใน <div> ที่มี id=“main”

Functional component VS Class Component ต่างกันอย่างไร

Functional component	Class Component
รูปแบบการเขียนเป็น javascript function ทั่วไป function จะรับ props เป็น argument แล้ว return เป็น React element	รูปแบบการเขียนเป็นแบบ class ที่จะต้องสืบทอดจาก React lib อีกทีแล้ว render มาเป็น React element
เขียน code ได้สั้นลงเพราะมี lib มาช่วย	ต้องเขียน code หลายบรรทัดมากกว่าเนื่องจากต้องเขียน logic เป็น state
ไม่ต้อง render ใน Functional component สามารถ return component ได้เลย	ต้องมี render method ทุกครั้งเพื่อ return component
รูปแแบบการเขียนเป็น Stateless ทำให้ไม่ซับซ้อน	รูปแแบบการเขียนเป็น State มีความซับซ้อน มากกว่า
มี lifecycle methods บางตัวที่ไม่สามารถใช้ได้เช่น componentDidMount (ใช้ useEffect แทน)	สามารถใช้ componentDidMount ได้ใน class component มากกว่า